<template>
    <div class="searchPage-box">
        <!-- 分割线 -->
        <hr>
        <!-- 物品分类管理展示 -->
        <div class="searchPage-nav">
            <div v-for="(v,i) in searchPage.sort" :key="i"
                :class="{active:sortWord==v.sortKey}"
                @click="loadProductBySortKey(v.sortKey)"
            >{{v.title}}</div>
        </div>
        <!-- 物品展示 -->
        <SearchPageGood class="searchPage-goods" :list="searchPage.product"></SearchPageGood>
    </div>
</template>
<script>
import SearchPageGood from "../components/searchPageGood";
import { mapState, mapActions } from "vuex";
export default {
    components: {
        SearchPageGood
    },
    data(){
        return {
            sortWord:"pop"
        }
    },
    computed: {
        ...mapState(["searchPage"])
    },
    methods: {
        ...mapActions(["loadProductAndSort"]),
        loadProducts(obj,sort="pop"){
            let params={};
            if(obj.q){
                params = {
                    q:obj.q,
                    cKey:46,
                    sort:sort,
                    page:1
                }
            }else{
                params = {
                    fcid:obj.fcid,
                    title:obj.title,
                    cKey:16,
                    sort:sort,
                    page:1
                }
            };
            this.loadProductAndSort(params);
        },
        loadProductBySortKey(sort){
            this.sortWord=sort;
            this.loadProducts(this.$route.query,sort);
        }
    },
    mounted() {
        this.loadProducts(this.$route.query);
    }
};
</script>
<style lang="less" scoped>
//搜索页面的样式
.searchPage-box {
    position: absolute;
    top: 1rem;
    bottom: 0rem;
    left: 0rem;
    right: 0rem;
    overflow-y: auto;
}
//物品分类的样式
.searchPage-nav {
    width: 100%;
    height: 1rem;
    box-sizing: border-box;
    display: flex;
    justify-content: space-around;
    align-items: center;
    > div {
        width: 100%;
        text-align: center;
        font-size: 0.35rem;
        font-weight: bold;
        border-right: 1px solid @gray-light;
    }
    > div[class='active']{
        color: @pink;
    }
    > div:last-child {
        border: none;
    }
}
//物品页样式
.searchPage-goods {
    width: 100%;
    box-sizing: border-box;
    padding: 0.2rem;
    display: flex;
    flex-flow: row wrap;
}
</style>